<template>
  <div class="crm-page  home-page">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <SaleCard title="成交客户数量" name="客户数量(个)" path="customer" :data="customerCount" @change="v=>{dataChange(v,'customerCount')}" />
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <SaleCard title="新增商机数量" name="商机数量(个)" path="chance" :data="busChanceCount" @change="v=>{dataChange(v,'busChanceCount')}" />

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <SaleCard title="合同金额分析" ismoney name="合同金额(元)" path="contract" :data="contractCount" @change="v=>{dataChange(v,'contractCount')}" />

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <SaleCard title="回款金额分析" ismoney name="回款金额(元)" path="payment" :data="paymentCount" @change="v=>{dataChange(v,'paymentCount')}" />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <SaleGaugeCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <SaleFunnelCard />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <TaskCard />
        <EventCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <MyCustomerCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <AssistantCard />
      </el-col>

    </el-row>
  </div>
</template>
<script>

import './index.scss'
import SaleCard from './components/SaleCard.vue'
import SaleFunnelCard from './components/saleFunnelCard'
import SaleGaugeCard from './components/saleGaugeCard'
import TaskCard from './components/taskCard'
import EventCard from './components/eventCard'
import MyCustomerCard from './components/myCustomerCard'
import AssistantCard from './components/assistantCard'
import { getCount } from '@/api/chart'
// assistantCard

export default {
  name: 'Home',
  components: { SaleCard, SaleFunnelCard, SaleGaugeCard, TaskCard, EventCard, MyCustomerCard, AssistantCard },
  data() {
    return {
      text: '',
      month: {},
      season: {},
      year: {},
      week: {},
      contractCount: {},
      customerCount: {},
      paymentCount: {},
      busChanceCount: {}
    }
  },
  mounted() {
    this.getData('7')
  },
  methods: {
    dataChange(v, t) {
      //
      this.getData(v, t)
    },
    getData(v, t) {
      const types = { 1: 'month', 3: 'season', 5: 'year', 7: 'week' }
      // 有数据说明已获取过
      if (this[types[v]].contractCount) {
        if (t) {
          this[t] = this[types[v]][t]
        }
        return
      }

      getCount({ searchType: v }).then((res) => {
        this[types[v]] = res
        if (t) {
          this[t] = this[types[v]][t]
        } else {
          this.contractCount = res.contractCount
          this.customerCount = res.customerCount
          this.paymentCount = res.paymentCount
          this.busChanceCount = res.busChanceCount
        }
      })
    }
  }
}
</script>
